<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>职务</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container">
    <div class="mdui-table-fluid mdui-m-t-4">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>#</th>
                <th colspan="2">职务</th>
                <th colspan="2"><i class="mdui-icon material-icons">&#xe5d2;</i></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="post:${posts}">
                <td class="no">1</td>
                <td class="post" th:text="${post}">主任医师</td>
                <td>&nbsp;</td>
                <td>
                    <a href="javascript:void(0)" th:onclick="|deletePost('${post}')|">
                        <i class="mdui-icon material-icons">&#xe872;</i>
                    </a>
                </td>
                <td>&nbsp;</td>
            </tr>
            <tr id="empty"></tr>
            </tbody>
        </table>
    </div>
    <button id="btnAdd" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"
            mdui-tooltip="{content: '添加职务', position: 'top'}">
        <i class="mdui-icon material-icons">add</i>
    </button>
</div>
</body>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script>
    var $$ = mdui.JQ;

    var listItem = $$('#posts');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');

    var no = 1;

    reNumber();
    $$('#btnAdd').on('click', function () {
        // 含标题
        mdui.prompt('请输入要添加的职务', '添加职务',
            function (value) {
                savePost(value);
            },
            function (value) {//添加按钮
            },
            {'confirmText': '添加', 'cancelText': '取消', 'maxlength': 32}
        );
    });

    function savePost(name) {
        $$.ajax({
            method: 'POST',
            url: '/post',
            data: {post: name},
            success: function (result) {
                if (result === 'success') {
                    var newRow = "<tr>" +
                        "<td class='no'>" + no++ + "</td>" +
                        "<td class='post'>" + name + "</td><td>&nbsp;</td>" +
                        "<td><a href='javascript:void(0)' onclick=deletePost('" + name + "')><i class='mdui-icon material-icons'>&#xe872;</i></a></td>" +
                        "<td>&nbsp;</td>" +
                        "</tr>";
                    $$('#empty').before(newRow);
                } else {
                    mdui.alert(result);
                }
            }
        });
    }

    function deletePost(name) {
        mdui.confirm('确定删除？删除后无法撤销', '', function () {
            doDeletePost(name);
        }, function () {

        }, {'confirmText': '确定', 'cancelText': '取消'});
    }

    function doDeletePost(name) {
        $$.ajax({
            method: 'DELETE',
            url: '/post/' + name,
            success: function (result) {
                if (result === 'success') {
                    //从表格里删除
                    $$('.post').each(function () {
                        if ($$(this).text() === name) {
                            $$(this).parent().remove();
                            reNumber();
                        }
                    })
                } else {
                    mdui.alert(result);
                }
            }
        });
    }

    function reNumber() {
        no = 1;
        $$('.no').each(function () {
            $$(this).text(no++);
        });
    }
</script>
</html>